<template>
  <div class="app-container">
    <div>
      <BasicBusiness ref="basicBusinessRef" />
    </div>
    <div style="padding: 50px">
      <Step ref="stepRef" />
    </div>
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="mini"
        label-width="180px"
      >
        <!-- <el-col :span="12">
          <el-form-item label="合同" prop="contractFileId">
            <el-select
              v-model="formData.contractFileId"
              placeholder="请选择合同"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in contractFileIdOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="12">
          <el-form-item label="投标时间" prop="cloudAmount">
            <el-date-picker
              v-model="formData.cloudAmount"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择投标时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col> -->

        <el-col :span="12">
          <el-form-item label="合同名称" prop="contractName">
            <el-input
              v-model="formData.contractName"
              placeholder="请输入合同名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合同编码" prop="contractCode">
            <el-input
              v-model="formData.contractCode"
              placeholder="请输入合同编码"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合同金额" prop="amount">
            <el-input
              v-model="formData.amount"
              placeholder="请输入合同金额"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="云业务金额" prop="cloudAmount">
            <el-input
              v-model="formData.cloudAmount"
              placeholder="请输入云业务金额"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="基础业务金额" prop="baseAmount">
            <el-input
              v-model="formData.baseAmount"
              placeholder="请输入基础业务金额"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="硬件金额" prop="deviceAmount">
            <el-input
              v-model="formData.deviceAmount"
              placeholder="请输入硬件金额"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中标服务费" prop="bidServiceFee">
            <el-input
              v-model="formData.bidServiceFee"
              placeholder="请输入中标服务费"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务金额" prop="serviceAmount">
            <el-input
              v-model="formData.serviceAmount"
              placeholder="请输入服务金额"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否使用原子能力" prop="isUseAtom">
            <el-select
              v-model="formData.isUseAtom"
              placeholder="请选择是否使用原子能力"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in isUseAtomOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原子能力" prop="atomNote">
            <el-input
              v-model="formData.atomNote"
              placeholder="请输入原子能力"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否属于自主交付" prop="isUseAutoDelivery">
            <el-select
              v-model="formData.isUseAutoDelivery"
              placeholder="请选择是否属于自主交付"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in isUseAutoDeliveryOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自主交付" prop="autoDeliveryNote">
            <el-input
              v-model="formData.autoDeliveryNote"
              placeholder="请输入自主交付"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            label="是否使用自研数字平台"
            prop="isUseSelfDigitalPlate"
          >
            <el-select
              v-model="formData.isUseSelfDigitalPlate"
              placeholder="请选择是否使用自研数字平台"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in isUseSelfDigitalPlateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自研数字平台" prop="selfDigitalPlateNote">
            <el-input
              v-model="formData.selfDigitalPlateNote"
              placeholder="请输入自研数字平台"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="是否使用自有产品及能力"
            prop="isUseSelfProductCapacity"
          >
            <el-select
              v-model="formData.isUseSelfProductCapacity"
              placeholder="请选择是否使用自有产品及能力"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in isUseSelfProductCapacityOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自有产品及能力" prop="selfProductCapacityNote">
            <el-input
              v-model="formData.selfProductCapacityNote"
              placeholder="请输入自有产品及能力"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自有能力项目" prop="selfCapacityProject">
            <el-input
              v-model="formData.selfCapacityProject"
              placeholder="请输入自有能力项目"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自有能力金额" prop="selfCapacity">
            <el-input
              v-model="formData.selfCapacity"
              placeholder="请输入自有能力金额"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约主体" prop="contractSubject">
            <el-input
              v-model="formData.contractSubject"
              placeholder="请输入签约主体"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="mini">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import BasicBusiness from "@/views/components/business/BasicBusiness.vue";
import Step from "@/views/components/business/Step.vue";
import { getProjectDetail, contractFilling } from "@/api/project/index";
export default {
  components: { BasicBusiness, Step },
  props: [],
  data() {
    return {
      formData: {
        contractFileId: undefined,
        contractCode: undefined,
        contractName: undefined,
        amount: undefined,
        baseAmount: undefined,
        deviceAmount: undefined,
        bidServiceFee: undefined,
        serviceAmount: undefined,
        isUseAtom: undefined,
        atomNote: undefined,
        isUseAutoDelivery: undefined,
        autoDeliveryNote: undefined,
        cloudAmount: null,
        contractSubject: undefined,
        isUseSelfDigitalPlate: undefined,
        selfDigitalPlateNote: undefined,
        isUseSelfProductCapacity: undefined,
        selfProductCapacityNote: undefined,
        selfCapacityProject: undefined,
        selfCapacity: undefined,
      },
      rules: {
        contractName: [
          {
            required: true,
            message: "请输入合同名称",
            trigger: "blur",
          },
        ],
        contractCode: [
          {
            required: true,
            message: "请输入合同编码",
            trigger: "blur",
          },
        ],
        amount: [
          {
            required: true,
            message: "请输入合同金额",
            trigger: "blur",
          },
        ],
        baseAmount: [
          {
            required: true,
            message: "请输入基础业务金额",
            trigger: "blur",
          },
        ],
        deviceAmount: [
          {
            required: true,
            message: "请输入硬件金额",
            trigger: "blur",
          },
        ],
        bidServiceFee: [
          {
            required: true,
            message: "请输入中标服务费",
            trigger: "blur",
          },
        ],
        serviceAmount: [
          {
            required: true,
            message: "请输入服务金额",
            trigger: "blur",
          },
        ],
        isUseAtom: [
          {
            required: true,
            message: "请选择是否使用原子能力",
            trigger: "change",
          },
        ],
        atomNote: [
          {
            required: true,
            message: "请输入原子能力",
            trigger: "blur",
          },
        ],
        isUseAutoDelivery: [
          {
            required: true,
            message: "请选择是否属于自主交付",
            trigger: "change",
          },
        ],
        autoDeliveryNote: [
          {
            required: true,
            message: "请输入自主交付",
            trigger: "blur",
          },
        ],
        cloudAmount: [
          {
            required: true,
            message: "请输入云业务金额",
            trigger: "blur",
          },
        ],
        contractSubject: [
          {
            required: true,
            message: "请输入签约主体",
            trigger: "blur",
          },
        ],
        isUseSelfDigitalPlate: [
          {
            required: true,
            message: "请选择是否使用自研数字平台",
            trigger: "change",
          },
        ],
        selfDigitalPlateNote: [
          {
            required: true,
            message: "请输入自研数字平台",
            trigger: "blur",
          },
        ],
        isUseSelfProductCapacity: [
          {
            required: true,
            message: "请选择是否使用自有产品及能力",
            trigger: "change",
          },
        ],
        selfProductCapacityNote: [
          {
            required: true,
            message: "请输入自有产品及能力",
            trigger: "blur",
          },
        ],
        selfCapacityProject: [
          {
            required: true,
            message: "请输入自有能力项目",
            trigger: "blur",
          },
        ],
        selfCapacity: [
          {
            required: true,
            message: "请输入自有能力金额",
            trigger: "blur",
          },
        ],
      },
      // contractFileIdOptions: [
      //   {
      //     label: "选项一",
      //     value: 1,
      //   },
      //   {
      //     label: "选项二",
      //     value: 2,
      //   },
      // ],
      isUseAtomOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      isUseAutoDeliveryOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      isUseSelfDigitalPlateOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      isUseSelfProductCapacityOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
    };
  },
  computed: {
    boId() {
      return this.$route.query.boId;
    },
    projectId() {
      return this.$route.query.projectId;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$refs.basicBusinessRef.loadData(this.boId).then((res) => {});
      getProjectDetail(this.boId).then((res) => {
        this.stage = res.data.stage;
        this.$refs.stepRef.setStage(this.stage);
        this.formData.contractFileId = res.data.contractId;
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单

        contractFilling({
          ...this.formData,
          boId: this.boId,
          projectId: this.projectId,
        }).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.replace("/contract/index");
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style></style>
